<template>
	<view class="">
		<view class="cmymain">
			<!-- 顶部导航 start -->
			<view class="bf">
				<view class="tabsStyl" :style="[style]">
					<tabs-swiper
						ref="tabSwiper"
						:bar-height="10"
						:duration="300"
						:bar-style="{}"
						:active-color="'#333'"
						:list="list"
						:is-scroll="false"
						:font-size="30"
						:current="current"
						:bold="true"
						:offset="[5, 20]"
						:bg-color="'#FFF'"
						:inactive-color="'#333'"
						:active-item-style="{}"
						:barWidth="40"
						:barHeight="10"
						:box-padding="[0, 0]"
						:background-bar="'linear-gradient(to right, rgb(254, 147, 103), rgb(254, 147, 103))'"
						@change="change"
					></tabs-swiper>
				</view>
				<scroll-view v-if="sarr.length" class='ws-n sarr pt10 bf p03' scroll-x='true' :scroll-into-view="toView">
					<block v-for="(v,i) in sarr" :key='i' >
						<view :id="'id' + i" @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c'
							:class="{wei:v.active}"
							style="width: auto;min-width: 118rpx;padding: 0 20rpx;"
							:style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">
							{{v.name}}</view>
					</block>
				</scroll-view>
			</view>
			<!-- 顶部导航 end -->
			<FlowList :data="dataList" list-type="balance"  />
			<jzz bgcolor="transparent" imgn='zwhb' :nodata="dataList.length==0&&isget" :mygd='mygd' />
			<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
				range-bg-color="rgba(253,215,75,0.2)" active-bg-color="#FE9367" @change="changeDate"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import navTab from '@/components/common/functionCmp/nav-tab.vue'
	import FlowList from './components/FlowList.vue'
	import jzz from '@/components/common/jzz.vue'
	import TabsSwiper from '@/components/custom-tabs-page-linkge/u-tabs-swiper/custom-tabs-swiper.vue';
	import {
		utilMixins,
		sljz
	} from "@/common/util-mixins.js"
	export default {
		name: 'myCoupon',
		components: {
			navTab,
			FlowList,
			jzz,
			TabsSwiper
		},
		mixins: [utilMixins,sljz],
		data() {
			return {
				toView:'',
				query: {
					timeType: 1,
					startTime: '',
					endTime: ''
				},
				dateTitle: '时间',
				showrl: false,
				// 来源1外卖2店内3快餐4当面付5券包6提现7.提现拒绝8.扣除手续费
				list:[	
					{name: '全部',type: 0}, {name: '外卖店内入账订单',type: 1},
					{name: '买单订单入账',type: 2}, {name: '服务费扣除',type: 3},
					{name: '申请提现',type: 4}, {name: '其他变动',type: 5},
				],
				sarr: [
					{name: '今天',active: true,type: [new Date().format('yyyy-MM-dd'),new Date().format('yyyy-MM-dd')]},
					{name: '近七天',active: false,type: [new Date().format('yyyy-MM-dd'),new Date(new Date().setDate((new Date().getDate()-7))).format('yyyy-MM-dd')]},
					{name: '近十五天',active: false,type: [new Date().format('yyyy-MM-dd'),new Date(new Date().setDate((new Date().getDate()-15))).format('yyyy-MM-dd')]},
					{name: '具体时间',active: false,type: 4}
				],
				dataList: [],
				result:{},
				params: {
					startTime:new Date().format('yyyy-MM-dd'),
					endTime:new Date().format('yyyy-MM-dd'),
					type:0,
					size: 10,
					page: 1,
				},
				tabWidth:'100%',
				current:0
			}
		},
		async onLoad(options) {
			this.getSystem()
			this.util.setNT('余额流水')
			this.getList()
			this.isOnLoad = false
		},
		onShow() {
			if (this.isOnLoad) {
				this.refresh();
			}
		},
		onReady() {
			setTimeout(() => {
				this.$refs.tabSwiper.init();
			}, 100);
		},
		computed: {
			style() {
				return {
					width: this.tabWidth.lastIndexOf('%') >= 0 ? this.tabWidth : this.tabWidth + 'rpx',
					background: '#FFF'
				};
			}
		},
		methods: {
			change(e){
				this.current = e
				this.params.type = this.list[e].type
				this.refresh()
			},
			changeDate(e) {
				this.params.startTime = e.startDate
				this.params.endTime = e.endDate
				this.refresh()
			},
			clickSarr(index) {
				this.sarr.forEach((item, i) => {
					if (i === index) {
						item.active = true
						this.toView = 'id' + (i-1)
						if(item.type != 4){
							this.params.startTime = item.type[1]
							this.params.endTime = item.type[0]
							this.refresh()
						}else{
							this.showrl = true
						}
					} else {
						item.active = false
					}
				})
			},
			refresh() {
				this.isget = this.mygd = false
				this.params.page = 1
				this.dataList = []
				this.getList()
			},
			async getList() {
				this.isOnLoad = true
				let {
					data
				} = await this.util.request({
					'url': this.api.storeBillList,
					method: 'POST',
					data: this.params,
				})
				this.result = data
				this.dataList = this.dataList.concat(data)
				this.isget = true
				this.mygd = this.params.size > data.length
				this.params.page++
			}
		},
	}
</script>

<style scoped lang="scss">
	.cmymain {
		background: #fff;
		padding-top: 0;
	}

	.stabsc {
		height: 90rpx;
	}
	.tabsStyl {
		flex: 1;
		min-width: 0rpx;
		margin: 0 auto;
	}
</style>
